<template>
    <view>
        <view class="f fv padding-sm vipBg bg-white text-black">
            <view class="f fv width_1 padding-lg radius5 bg-vip margin-bottom-sm">
                <view class="f fac fpj">
                    <view class="f font_w text-lg">
                        <van-icon name="points" size="20px" />
                        <view class="margin-lr-xs">可用积分</view>
                        <view>88</view>
                    </view>
                    <view @tap="showJlFun">使用记录</view>
                </view>
                <view class="f fac fpc tips margin-top-sm">
                    <van-icon name="medal" color="orange" size="35rpx" />
                    <view class="text-sm margin-left-xs">已连续签到三天</view>
                </view>
            </view>

            <!-- <view class="width_1 padding-sm radius5">签到打卡</view> -->
            <swiper previous-margin="120rpx" next-margin="120rpx" @change="swiperChange" circular :autoplay="true" style="height: 160rpx; margin: 10rpx 0 10rpx 0">
                <swiper-item>
                    <!-- <imagesrc='{{item}}'></image> -->
                    <view @tap="showRlFun" :class="'le-img ' + (nowIdx == 0 ? 'le-active' : '') + ' padding-sm bg-red'" @load="getHeight">每日签到得好礼</view>
                </swiper-item>
                <swiper-item>
                    <!-- <imagesrc='{{item}}'></image> -->
                    <view @tap="showLuckFun" :class="'le-img ' + (nowIdx == 1 ? 'le-active' : '') + ' padding-sm bg-blue'" @load="getHeight">积分抽奖</view>
                </swiper-item>
                <swiper-item>
                    <!-- <imagesrc='{{item}}'></image> -->
                    <view :class="'le-img ' + (nowIdx == 2 ? 'le-active' : '') + ' padding-sm bg-yellow'" @load="getHeight">限时活动</view>
                </swiper-item>
            </swiper>
        </view>
        <view class="f fv width_1 bg-gray light">
            <view class="padding-xs width_1 f text-lg font_w bg-white">积分商城</view>
            <view class="f fac fpc bg-white margin-tb-sm" style="height: 80rpx">
                <view :class="'f fpc width_3 ' + (sort == 1 ? 'text-black font_w' : 'text-gray')" data-index="1" @tap="toSort">综合</view>
                <view :class="'f fpc width_3 ' + (sort == 2 ? 'text-black font_w' : 'text-gray')" data-index="2" @tap="toSort">
                    按价格
                    <view class="cuIcon-unfold" :animation="animationData"></view>
                </view>
                <view :class="'f fpc width_3 ' + (sort == 3 ? 'text-black font_w' : 'text-gray')" data-index="3" @tap="toSort">按销量</view>
            </view>
            <view :scroll-y="true" class="f shopList width_1 fpj padding-lr-sm">
                <view class="f fv list_item bg-white" @tap="goDetail" :data-i="item" v-for="(item, index) in jplist" :key="index">
                    <image class="fill" :src="item.img"></image>

                    <view class="f fv fpa f1 padding-xs">
                        <view class="font_w text-black">{{ item.name }}</view>
                        <view class="text-gray">{{ item.price }}积分</view>
                    </view>
                </view>
            </view>

            <van-popup :show="showRl" custom-style="height: 680rpx;width: 100%;" @close="showRlFun" :close-on-click-overlay="false" :closeable="true">
                <calendar></calendar>
            </van-popup>
            <!-- <van-calendar show="{{ showRl }}" bind:close="showRl" bind:confirm="onConfirm" confirm-text="今日签到" title="签到表" min-date="{{ minDate }}" formatter="{{ formatter }}" default-date="{{ defaul }}" max-date="{{ maxDate }}" /> -->
            <van-popup :show="showJl" position="left" custom-style="height: 100%;width: 600rpx;" @close="showJlFun">
                <van-cell title="每日签到" label="2024/5/21" icon="flag-o" value="+10" />
                <van-cell title="每日签到" label="2024/5/22" icon="flag-o" value="+10" />
                <van-cell title="每日签到" label="2024/5/23" icon="flag-o" value="+10" />
                <van-cell title="积分抽奖" label="2024/5/23" icon="gem-o" value="-30" />
            </van-popup>
            <van-popup :show="showLuck" custom-style="height: 800rpx;width: 100%;" @close="showLuckFun" :close-on-click-overlay="false" :closeable="true">
                <luck></luck>
            </van-popup>
        </view>
    </view>
</template>

<script>
import luck from '../../../components/luck-draw/index';
import calendar from '../../../components/calender/index';
// page/cloud/index.js
export default {
    components: {
        luck,
        calendar
    },
    data() {
        return {
            list: [
                'https://img2.imgtp.com/2024/05/08/i7zXKY6q.jpg',
                'https://img2.imgtp.com/2024/05/08/XZ7SUqM1.jpg',
                '../../image/lunbo1.jpg',
                'https://img2.imgtp.com/2024/05/08/yy7VRDAx.jpg'
            ],
            jplist: [
                {
                    img: 'https://img2.imgtp.com/2024/05/08/iWTES1kj.jpg',
                    name: '九五至尊',
                    price: 999,
                    buyNum: 1,
                    checked: true
                },
                {
                    img: 'https://img2.imgtp.com/2024/05/08/5n6My6nh.jpg',
                    name: '遵义红',
                    price: 666,
                    buyNum: 1,
                    checked: true
                },
                {
                    img: 'https://img2.imgtp.com/2024/05/08/d1Ev6Zjh.jpg',
                    name: '湄潭翠芽',
                    price: 888,
                    buyNum: 1,
                    checked: true
                }
            ],
            nowIdx: 0,
            swiperH: '',
            showRl: false,
            showJl: false,
            showLuck: false,
            minDate: '',
            maxDate: '',
            sort: 1,
            sortUp: false,
            animationData: {},
            defaul: new Date().getTime(),
            formatter(day) {
                const year = day.date.getFullYear();
                let month = day.date.getMonth() + 1;
                month = month < 10 ? '0' + month : month;
                const date = day.date.getDate();
                let today_m = new Date().getMonth() + 1;
                today_m = today_m < 10 ? '0' + today_m : today_m;
                const today_d = [new Date().getDate() - 3, new Date().getDate() - 2, new Date().getDate() - 1];
                let signDays = uni.getStorageSync('signDays');
                //测试，前三天已签到
                if (month == today_m) {
                    if (date == today_d[0] || date == today_d[1] || date == today_d[2]) {
                        day.topInfo = '已签到';
                        day.type = 'disabled';
                    }
                }
                // 不是今天的禁用
                if (date != new Date().getDate()) {
                    day.type = 'disabled';
                } else if (month == today_m) {
                    day.text = '今天';
                }
                // 缓存中已签到的禁用
                if (signDays) {
                    signDays.forEach((e) => {
                        if (e == year + '-' + month + '-' + date) {
                            day.topInfo = '已签到';
                            day.type = 'disabled';
                        }
                    });
                }
                return day;
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            minDate: new Date(this.getDateStr(-15)).getTime(),
            maxDate: new Date(this.getDateStr(15)).getTime()
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow(e) {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        toSort(e) {
            if (e.currentTarget.dataset.index == 2) {
                this.setData({
                    sortUp: !this.sortUp
                });
                let sortList = this.jplist;
                var animation = uni.createAnimation({
                    duration: 600,
                    timingFunction: 'ease'
                });
                this.animation = animation;
                if (this.sortUp) {
                    sortList.sort((a, b) => {
                        return b.price - a.price;
                    });
                    animation.rotate(180).step();
                } else {
                    sortList.sort((a, b) => {
                        return a.price - b.price;
                    });
                    animation.rotate(0).step();
                }
                this.setData({
                    animationData: animation.export(),
                    jplist: sortList
                });
            }
            this.setData({
                sort: e.currentTarget.dataset.index
            });
        },

        //获取swiper高度
        getHeight: function (e) {
            var winWid = uni.getSystemInfoSync().windowWidth - 200; //获取当前屏幕的宽度
            var imgh = e.detail.height; //图片高度
            var imgw = e.detail.width;
            var sH = (winWid * imgh) / imgw + 'px';
            this.setData({
                swiperH: sH
            });
        },

        //swiper滑动事件
        swiperChange: function (e) {
            this.setData({
                nowIdx: e.detail.current
            });
        },

        onConfirm(e) {
            this.setData({
                showRl: !this.showRl
            });
            // 是否在缓存中
            let isSign = false;
            let days = uni.getStorageSync('signDays');
            if (days) {
                days.forEach((e) => {
                    if (e == this.formatDate(new Date())) {
                        isSign = true;
                    }
                });
                if (isSign == false) {
                    days.push(this.formatDate(new Date()));
                    uni.setStorageSync('signDays', days);
                }
            } else {
                uni.setStorageSync('signDays', [this.formatDate(e.detail)]);
            }
            if (isSign) {
                uni.showToast({
                    title: '请勿重复签到',
                    icon: 'error'
                });
            } else {
                uni.showToast({
                    title: '签到成功'
                });
            }
            this.setData({
                formatter: function (day) {
                    const year = day.date.getFullYear();
                    let month = day.date.getMonth() + 1;
                    month = month < 10 ? '0' + month : month;
                    const date = day.date.getDate();
                    let today_m = new Date().getMonth() + 1;
                    today_m = today_m < 10 ? '0' + today_m : today_m;
                    const today_d = [new Date().getDate() - 3, new Date().getDate() - 2, new Date().getDate() - 1];
                    let signDays = uni.getStorageSync('signDays');
                    //测试，前三天已签到
                    if (month == today_m) {
                        if (date == today_d[0] || date == today_d[1] || date == today_d[2]) {
                            day.topInfo = '已签到';
                            day.type = 'disabled';
                        }
                    }
                    // 不是今天的禁用
                    if (date != new Date().getDate()) {
                        day.type = 'disabled';
                    } else if (month == today_m) {
                        day.text = '今天';
                    }
                    // 缓存中已签到的禁用
                    if (signDays) {
                        signDays.forEach((e) => {
                            if (e == year + '-' + month + '-' + date) {
                                day.topInfo = '已签到';
                                day.type = 'disabled';
                            }
                        });
                    }
                    if (e.detail == day.date) {
                        day.topInfo = '已签到';
                        day.type = 'disabled';
                    }
                    return day;
                }
            });
        },

        //以今日计，前后x天的日期
        getDateStr(AddDayCount) {
            var dd = new Date();
            dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1; //获取当前月份的日期，不足10补0
            var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0
            return y + '-' + m + '-' + d;
        },

        formatDate(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            var d = date.getDate();
            d = d < 10 ? '0' + d : d;
            return y + '-' + m + '-' + d;
        },

        showRlFun() {
            this.setData({
                showRl: !this.showRl
            });
        },

        showJlFun() {
            this.setData({
                showJl: !this.showJl
            });
        },

        showLuckFun() {
            this.setData({
                showLuck: !this.showLuck
            });
        },

        goDetail(e) {
            let info = JSON.stringify(e.currentTarget.dataset.i);
            uni.navigateTo({
                url: '../../../page/productDetil/index?type=points&info=' + info
            });
        }
    }
};
</script>
<style>
/* @import './index.css'; */
.shopList {
    flex-wrap: wrap;
}

.list_item {
    width: 48%;
    height: 350rpx;
    border-radius: 6px;
    margin-bottom: 10px;
}
.tips {
    height: 50rpx;
    border-radius: 30rpx;
    background-color: rgb(255, 232, 158);
    width: 270rpx;
    padding: 20rpx;
}
</style>
